<template>
  <view class="pagesB">
    <view class="box">
      <view class="cube">
        <view class="front" style="background-image: linear-gradient(45deg, #f43f3b, #ec008c);opacity: 0.2;">
        </view>
        <view class="back" style="background-image: linear-gradient(45deg, #ff7612, #ff571c);opacity: 0.2;">
        </view>
        <view class="left" style="background-image: linear-gradient(45deg, #7FD02B, #9ddb47);opacity: 0.2;">
        </view>
        <view class="right" style="background-image: linear-gradient(45deg, #9000ff, #5e00ff);opacity: 0.2;">
        </view>
        <view class="top" style="background-image: linear-gradient(45deg, #6F68DF, #ec008c);opacity: 0.2;"></view>
        <view class="bottom" style="background-image: linear-gradient(45deg, #0070FF, #19CF8A);opacity: 0.2;">
        </view>

        <view
            v-if="imageList[0]"
            class="in-front"
            style="width: 200rpx;height: 200rpx;background-size: cover;overflow: hidden;"
            :style="{'background-image': `url('${imageList[0].image}')`}"
        >
        </view>
        <view
            v-if="imageList[1]"
            class="in-back"
            style="width: 200rpx;height: 200rpx;background-size: cover;overflow: hidden;"
            :style="{'background-image': `url('${imageList[1].image}')`}"
        >
        </view>
        <view
            v-if="imageList[2]"
            class="in-right"
            style="width: 200rpx;height: 200rpx;background-size: cover;overflow: hidden;"
            :style="{'background-image': `url('${imageList[2].image}')`}"
        >
        </view>
        <view
            v-if="imageList[3]"
            class="in-left"
            style="width: 200rpx;height: 200rpx;background-size: cover;overflow: hidden;"
            :style="{'background-image': `url('${imageList[3].image}')`}"
        >
        </view>
        <view
            v-if="imageList[4]"
            class="in-top"
            style="width: 200rpx;height: 200rpx;background-size: cover;overflow: hidden;"
            :style="{'background-image': `url('${imageList[4].image}')`}"
        >
        </view>
        <view
            v-if="imageList[5]"
            class="in-bottom"
            style="width: 200rpx;height: 200rpx;background-size: cover;overflow: hidden;"
            :style="{'background-image': `url('${imageList[5].image}')`}"
        >
        </view>
      </view>
    </view>
    <view class="tn-tabbar-height"></view>
    <view class="bg-tabbar-shadow"></view>
  </view>
</template>

<script>
  export default {
    name: 'SkinPreview',
    props: {
      imageList: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        show1: false,
        cardCur: 2,
        swiperList: [{
          id: 0,
          type: 'image',
          name: '累计129人购买',
          get: '已购买',
          icon: 'fireworks',
        }, {
          id: 1,
          type: 'image',
          name: '累计432人购买',
          get: '已购买',
          icon: 'fireworks',
        }, {
          id: 2,
          type: 'image',
          name: '累计309人购买',
          get: '已购买',
          icon: 'fireworks',
        }, {
          id: 3,
          type: 'image',
          name: '累计322人购买',
          get: '已购买',
          icon: 'fireworks',
        }, {
          id: 4,
          type: 'image',
          name: '累计908人购买',
          get: '未购买',
          icon: 'cube',
        }],
      }
    },
    methods: {
      // cardSwiper
      cardSwiper(e) {
        this.cardCur = e.detail.current
      },
      // swiper点击事件
      handleSwiperClick(index) {
        this.cardCur = index
      },
      // 跳转
      tn(e) {
        uni.navigateTo({
          url: e,
        });
      },

      // 弹出模态框
      showModal1(event) {
        this.openModal1()
      },
      // 打开模态框
      openModal1() {
        this.show1 = true
      },
    }
  }
</script>

<style lang="scss" scoped>
  .pagesB {
    max-height: 100vh;
  }

  /* 底部安全边距 start*/
  .tn-tabbar-height {
    min-height: 60rpx;
    height: calc(80rpx + env(safe-area-inset-bottom) / 2);
    height: calc(80rpx + constant(safe-area-inset-bottom));
  }

  /* 底部tabbar假阴影 start*/
  .bg-tabbar-shadow {
    // background-image: repeating-linear-gradient(to top, rgba(0,0,0,0.1) 10rpx, rgba(255,255,255,0) , rgba(255,255,255,0));
    box-shadow: 0rpx 0rpx 220rpx 0rpx rgba(0, 0, 0, 0.55);
    position: fixed;
    bottom: -100rpx;
    height: 100rpx;
    width: 100vw;
    z-index: 1;
  }

  /* 立方体1 */
  @keyframes rotate {
    0% {
      transform: rotateX(0deg) rotateY(0deg);
    }

    100% {
      transform: rotateX(360deg) rotateY(360deg);
    }
  }

  .box {
    margin: 0 275rpx 0 275rpx;
    perspective: 130px;
  }

  .cube {
    width: 100px;
    height: 100px;
    position: relative;
    transform: rotateX(-41deg) rotateY(-63deg);
    transform-style: preserve-3d;
    animation: rotate 20s infinite linear;
  }

  .cube>view {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 200px;
    font-size: 40px;
    font-weight: bold;
    color: #FFFFFF;
    background: #16171D33;
    border: 1px solid #FFFFFF;
    border-radius: 30rpx;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 5s ease-in;
  }

  .front {
    transform: translateZ(100px) scale(0.5);
  }

  .back {

    transform: translateZ(-100px) rotateY(-180deg) scale(0.5);
  }

  .left {
    transform: translateX(-100px) rotateY(-90deg) scale(0.5);
  }

  .right {
    transform: translateX(100px) rotateY(90deg) scale(0.5);
  }

  .top {
    transform: translateY(-100px) rotateX(90deg) scale(0.5);
  }

  .bottom {
    transform: translateY(100px) rotateX(-90deg) scale(0.5);
  }



  .in-front {
    transform: translateZ(65px);
  }

  .in-back {
    transform: translateZ(-65px) rotateY(180deg);
  }

  .in-left {
    transform: translateX(65px) rotateY(90deg);
  }

  .in-right {
    transform: translateX(-65px) rotateY(-90deg);
  }

  .in-top {
    transform: translateY(65px) rotateX(90deg);
  }

  .in-bottom {
    transform: translateY(-65px) rotateX(-90deg);
  }
</style>
